<!--
 * @Description: 测试Element-plus的使用
 * @Author: laoyuan
 * @Date: 2023-06-09 16:52:53
-->
<template>
  <div class="center-box">
    <h1 class="title">个人中心-使用Element-plus</h1>
    <dl class="user-info">
      <dt class="user-title">状态管理-我的信息</dt>
      <dd class="line">
        用户名：<span class="text">{{ userStore.userName }}</span>
      </dd>
      <dd class="line">
        用户ID：<span class="text">{{ proxy.appId }}</span>
      </dd>
    </dl>
    <!-- 按钮模块 -->
    <div class="btn-box">
      <el-button type="primary" @click="updateUserData(true)">通过action修改userName</el-button>
      <el-button type="success" @click="updateUserData(false)">通过patch修改userName</el-button>
      <h2>测试ElMessageBox的使用</h2>
      <el-switch
        v-model="row.status"
        inline-prompt
        :active-value="1"
        :inactive-value="0"
        active-text="已启用"
        inactive-text="已停用"
        class="table-switch"
        @change="onChangeSwitch(row)"
      />
    </div>
    <TestAxios></TestAxios>
  </div>
</template>
<script setup lang="ts">
  import useUserStore from '@/store/modules/useUserStore';
  import TestAxios from '../TestAxios/index.vue';
  import { ElMessage, ElMessageBox } from 'element-plus';

  const userStore = useUserStore();
  // 通过解构出action方法
  const { updateUserName } = userStore;
  // 测试action方法
  const updateUserData = (isAction: boolean) => {
    if (isAction) {
      // action 修改 store 中的数据
      updateUserName('laoyuan修改了');
      // 同时可以使用userStore.updateUserName('laoyuan修改了');
    } else {
      // 未定义 action 时可以用 $patch 方法直接更改状态属性
      // $patch 修改 store 中的数据
      userStore.$patch({
        userName: '$patch修改了laoyuan',
      });
    }
  };

  // 获取原型
  let { proxy } = getCurrentInstance() as any;

  const row = reactive({
    status: 1,
    name: '张三',
  });
  // 状态切换
  const onChangeSwitch = (row?: any) => {
    ElMessageBox.confirm(
      `确认要<strong>${row.status === 0 ? '停用' : '启用'}
        </strong><strong style='color:var(--el-color-primary)'>${row.name}</strong>吗?`,
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        draggable: true,
      },
    )
      .then(() => {
        ElMessage({
          message: `已${row.status === 0 ? '停用' : '启用'}${row.name}`,
          type: 'success',
        });
      })
      .catch(() => {
        row.status === 0 ? (row.status = 1) : (row.status = 0);
      });
  };
</script>
<style lang="scss" scoped>
  @import './styles.scss';
</style>
